<script setup lang="ts">
import useDragramStore from '@/pages/table-diagraming/store/useDragramStore'
import CustomInput from './components/CustomInput.vue'
import { ChromeFilled } from '@element-plus/icons-vue'

interface IEmits {
  (e: 'openParseHttpDialog'): void
}

const emits = defineEmits<IEmits>()

const handleDragOver = (e: DragEvent) => {
  e.preventDefault()
}

const dragramStore = useDragramStore()
const { searchFormItems, columnItems, searchRegionOptions, interactionElements } =
  storeToRefs(dragramStore)
const rowGap = computed(() => {
  return searchRegionOptions.value.rowGap + 'px'
})
const columnGap = computed(() => {
  return searchRegionOptions.value.columnGap + 'px'
})

const deleteItem = (id: string) => {
  const idx = searchFormItems.value.findIndex((item) => item.id === id)
  searchFormItems.value.splice(idx, 1)
}

const [showSetting, setShowSetting] = useToggle(false)

const openParseHttp = () => {
  emits('openParseHttpDialog')
}

const [interEditOpen, handleInterEditOpen] = useToggle(false)
</script>

<template>
  <div class="dragram-wrapper" @dragover="handleDragOver">
    <main class="bg-white w-full h-full shadow">
      <!-- 检索 -->
      <section class="search-region" :class="`${searchRegionOptions.type}-layout`">
        <custom-input
          v-for="item in searchFormItems"
          :key="item.id"
          @delete-item="deleteItem(item.id)"
          :item="item"
          @click="(e: MouseEvent) => dragramStore.hanldeSelectFormItem(e, item)"
        ></custom-input>
        <div>
          <el-button type="primary" icon="Search">搜索</el-button>
          <el-button icon="RefreshRight">重置</el-button>
        </div>
        <div class="setting" @mouseenter="setShowSetting" @mouseleave="setShowSetting">
          <span class="set-tag">
            <el-icon size="20"><Setting /></el-icon>
          </span>
          <transition name="draw">
            <div class="flex flex-nowrap" v-show="showSetting">
              <el-radio-group
                class="flex !flex-nowrap text-nowrap"
                v-model="searchRegionOptions.type"
                size="small"
              >
                <el-radio-button value="grid">Grid布局</el-radio-button>
                <el-radio-button value="flex">紧凑型</el-radio-button>
              </el-radio-group>
              <div class="flex flex-nowrap items-center text-slate-500 ml-1">
                <label class="text-sm text-nowrap">列数:</label>
                <el-input-number
                  v-model="searchRegionOptions.columns"
                  size="small"
                  :controls="false"
                  :precision="0"
                  :min="1"
                ></el-input-number>
              </div>
              <div class="flex flex-nowrap items-center text-slate-500 ml-1">
                <label class="text-sm text-nowrap">行间距:</label>
                <el-input-number
                  v-model="searchRegionOptions.rowGap"
                  size="small"
                  :controls="false"
                  :precision="0"
                ></el-input-number
                >px
              </div>
              <div class="flex flex-nowrap items-center text-slate-500 ml-1">
                <label class="text-sm text-nowrap">列间距:</label>
                <el-input-number
                  v-model="searchRegionOptions.columnGap"
                  size="small"
                  :controls="false"
                  :precision="0"
                ></el-input-number
                >px
              </div>
            </div>
          </transition>
        </div>
      </section>
      <!-- 交互弹窗 -->
      <section class="inter-box">
        <div v-for="item in interactionElements" :key="item.id">
          <template v-if="!interEditOpen">
            <el-button
              class="relative"
              type="primary"
              plain
              icon="Notification"
              @click="handleInterEditOpen"
              ><span class="text-xs">{{ item.title }}</span>
              <span
                class="absolute right-0 top-0"
                @click="dragramStore.removeInteractionElement(item.id)"
                ><el-icon size="16"><CircleClose /></el-icon
              ></span>
            </el-button>
          </template>
          <template v-else>
            <el-input
              v-model="item.title"
              class="!w-[100px]"
              size="small"
              @blur="handleInterEditOpen"
            ></el-input>
          </template>
        </div>
      </section>
      <el-divider />

      <!-- 表格 -->
      <section class="table-region">
        <div class="h-full w-full overflow-x-auto">
          <transition-group name="el-fade-in-linear">
            <template v-if="columnItems.length > 0">
              <table class="cus-table">
                <tbody>
                  <tr>
                    <transition-group name="el-zoom-in-center">
                      <th v-for="item in columnItems" :key="item.id">
                        {{ item.label }}

                        <span
                          class="plus-icon"
                          @click="dragramStore.addColumnItem(item.id)"
                        >
                          <el-icon><CirclePlusFilled /></el-icon>
                        </span>

                        <div class="action-box">
                          <span
                            @click="dragramStore.handleSelectColumn(item)"
                            class="action"
                          >
                            <el-icon
                              size="25"
                              class="hover:bg-gray-200 p-1 cursor-pointer"
                            >
                              <EditPen />
                            </el-icon>
                          </span>
                          <span
                            class="action"
                            @click="dragramStore.deleteColumnItem(item.id)"
                          >
                            <el-icon
                              size="25"
                              class="hover:bg-gray-200 p-1 cursor-pointer"
                            >
                              <Delete />
                            </el-icon>
                          </span>
                        </div>
                      </th>
                    </transition-group>
                  </tr>
                  <tr>
                    <transition-group name="el-zoom-in-center">
                      <td v-for="item in columnItems" :key="item.prop[0]">
                        prop:&nbsp;&nbsp;<el-text type="primary" size="large" tag="ins">{{
                          item.prop
                        }}</el-text>
                      </td>
                    </transition-group>
                  </tr>
                </tbody>
              </table>
            </template>
            <el-empty v-else description="从接口导入数据" @click="openParseHttp">
              <el-button type="primary" :icon="ChromeFilled" size="large"
                >从接口数据渲染</el-button
              >
            </el-empty>
          </transition-group>
        </div>
      </section>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.dragram-wrapper {
  padding: 10px;
  .search-region {
    position: relative;
    height: 200px;
    gap: v-bind(rowGap) v-bind(columnGap);
    border: 3px solid var(--el-border-color);
    padding: 20px;
    overflow: auto;
    &.grid-layout {
      display: grid;
      grid-template-columns: repeat(v-bind('searchRegionOptions.columns'), 1fr);
      grid-auto-rows: 30px;
    }
    &.flex-layout {
      display: flex;
      flex-wrap: wrap;
    }
    .setting {
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(-100%);
      background-color: #ebedf0;
      height: 30px;
      line-height: 30px;
      .set-tag {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ebedf0;
      }
      :deep(.el-input-number) {
        padding: 0;
        width: 80px;
      }
    }
  }
  .inter-box {
    height: 40px;
    display: flex;
    align-items: center;
    background-color: lightgrey;
    padding: 0 5px;
    gap: 10px;
  }

  .table-region {
    height: calc(100% - 320px);
    padding: 0 20px;
    .cus-table {
      max-width: 100%;
      height: 100%;
      border: 1px solid #666;
      border-collapse: collapse;
      th {
        height: 50px;
        position: relative;
        padding: 15px;
        border: 1px solid #666;
        background-color: #dedede;
        min-width: 120px;
        .plus-icon {
          position: absolute;
          right: 0;
          top: 20%;
          transform: translate(50%, -50%) scale(2);
          z-index: 9;
          cursor: pointer;
          color: #337ecc;
          opacity: 0;
          transition: opacity 0.5s;
        }
        .action-box {
          opacity: 0;
          position: absolute;
          bottom: 0;
          left: 0;
          background-color: #fff;
          box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
          transform: translateY(100%);
          display: flex;
          border-radius: 3px;
          opacity: 0;
          transition: opacity 0.5s;
          .action {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5px;
          }
        }
        &:hover {
          .action-box,
          .plus-icon {
            opacity: 1;
          }
        }
      }
      td {
        padding: 8px;
        border: 1px solid #666;
        background-color: #fff;
        font-size: 20px;
      }
    }
  }
}

.draw-enter-active,
.draw-leave-active {
  width: 543px;
  opacity: 1;
  transition: width 0.2s ease-out;
}

.draw-enter-from,
.draw-leave-to {
  width: 0px;
  opacity: 0;
}
</style>
